<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{ max-width: 100%; }
        .card{ background-color: #fff; border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 15px; box-shadow: 1px 3px 3px rgba(0, 0, 0, .25); }
        .card .placeholder{  position: absolute; bottom: 0; left: 0; width: 100%; font-size: 14px; color: #fff; padding: 5px 10px; box-sizing: border-box; background-color: rgba(0, 0, 0, .25); }

    </style>
</head>
<body>

    <div class="card">
        <img src="../images/6.png">
        <div class="placeholder"> 好美的鹿 </div>
    </div>

    <div class="card">
        <img src="../images/7.jpg">
        <div class="placeholder">此处风景甚佳，岂不美哉</div>
    </div>
    
</body>
</html>